<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#f1f1f1" :fullscreen="true">
		<view class="page-wallet animate__animated animate__fadeIn">
			<Header tit="MAKE A TRANSFER" :title="t('wallet.title')"></Header>
			<view class="content">
				<view class="info">
					<view class="success flex flex-center">
						<cl-icon class="icon" name="success-fill" color="#0C81F7" size="80rpx"></cl-icon>
						{{ $t('wallet.success') }}
					</view>
					<view v-if="cache.lang=='zh'" class="text flex flex-center"
						>您给 **嫣(185****3321)转账
						<view class="font"> ¥550000.00 </view>
					</view>
					<view v-else class="text flex flex-center"
						>You make a transfer to ** Yan (185****3321)
						<view class="font"> ¥550000.00 </view>
					</view>
				</view>
			</view>
			<view class="alert flex align-center">
				<view class="red">{{ $t('wallet.alert') }}：</view>{{ $t('wallet.text_') }}
			</view>
			<view class="btn" @click="router.home()"> {{ $t('wallet.finsh') }} </view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import Header from "/@/components/header.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const app = useApp();
const ui = useUi();
const change = (e: any) => {
	console.log(e);
};
</script>

<style lang="scss" scoped>
.page-wallet {
	padding-bottom: 30rpx;

	.content {
		padding: 30rpx;
		.info {
			width: 100%;
			height: 320rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			padding-top: 90rpx;
			box-sizing: border-box;
			.success {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 40rpx;
				color: #0c81f7;
				.icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
			.text {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				margin-top: 90rpx;
				.font {
					color: #0c81f7;
					margin-left: 10rpx;
				}
			}
		}
	}
	.alert {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		padding: 0 30rpx;
	}
	.red {
		color: #ff0000;
	}
	.btn {
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		height: 88rpx;
		background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
		border-radius: 20rpx;
		text-align: center;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		line-height: 88rpx;
		margin-top: 30rpx;
	}
}
</style>
